<template>
  <div class="price-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="历史价格" name="historyPriceData">
        <div class="history-price-header jtt-clearfix">
          <div class="jtt-fl">
            <span class="label">当前价格：</span>
            <span class="current-price">￥{{ currentPrice }}</span>
            <span class="label">最高价：</span>
            <span class="highest-price">￥{{ highPrice }}</span>
            <span class="label">最低价：</span>
            <span class="lowest-price">￥{{ lowerPrice }}</span>
          </div>
          <div class="jtt-fr">
            <span class="date">{{ startTime }}~{{ endTime }}</span>
          </div>
        </div>
        <div id="historyPriceEcharts" style="width: 517px; height: 312px"></div>
      </el-tab-pane>
      <el-tab-pane label="历史券后价" name="historyCouponData">
        <div class="history-coupon-header">
          <span class="label">历史最低券后价：</span>
          <span class="price">￥{{ historyLowerPrice }}</span>
        </div>
        <div
          id="historyCouponEcharts"
          style="width: 517px; height: 312px"
        ></div>
      </el-tab-pane>
      <el-tab-pane label="30天均价" name="sellData">
        <div id="sellEcharts" style="width: 517px; height: 312px"></div>
      </el-tab-pane>
    </el-tabs>
    <foot></foot>
    <button class="screenshots jtt-vertical-middle" @click="exportPic">
      <span class="icon iconfont icon-pic-download"></span>
      <span class="text">一键截图</span>
    </button>
  </div>
</template>

<script>
let historyPriceEcharts, historyCouponEcharts, sellEcharts;
const options = {
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    top: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: "value",
  },
};
import * as echarts from "echarts";
export default {
  data() {
    return {
      activeName: "historyPriceData",
      currentPrice: "",
      highPrice: "",
      lowerPrice: "",
      startTime: "",
      endTime: "",
      historyLowerPrice: "",
    };
  },
  methods: {
    exportPic() {
      let a = document.createElement("a");
      a.href = historyPriceEcharts.getDataURL({
        pixelRatio: 2,
        backgroundColor: "#fff",
      });
      a.download="export.png"
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {
    historyPriceEcharts = echarts.init(
      document.getElementById("historyPriceEcharts")
    );
    let historyPriceOption = Object.assign({}, options, {
      formatter: "时间:{b0}<br />价格:{c0}",
      series: [
        {
          data: [],
          type: "line",
          lineStyle: {
            color: "rgba(245, 45, 54, 1)",
          },
          markPoint: {
            itemStyle: {
              color: "#fff",
              borderWidth: 2,
              borderColor: "rgba(245, 45, 54, 1)",
            },
            data: [{ type: "max", name: "最大值" }],
          },
          areaStyle: {
            color: "rgba(245, 45, 54, 0.1)",
          },
          showSymbol: false,
        },
      ],
    });
    historyPriceEcharts.setOption(historyPriceOption);

    historyCouponEcharts = echarts.init(
      document.getElementById("historyCouponEcharts")
    );
    let historyCouponOptions = Object.assign({}, options, {
      formatter: "时间:{b0}<br />价格:{c0}",
      series: [
        {
          data: [],
          markPoint: {
            itemStyle: {
              color: "#fff",
              borderWidth: 2,
              borderColor: "rgba(30, 204, 160, 1)",
            },
            data: [{ type: "max", name: "最大值" }],
          },
          type: "line",
          lineStyle: {
            color: "rgba(30, 204, 160, 1)",
          },
          areaStyle: {
            color: "rgba(30, 204, 160, 0.1)",
          },
          showSymbol: false,
        },
      ],
    });
    historyCouponEcharts.setOption(historyCouponOptions);

    sellEcharts = echarts.init(document.getElementById("sellEcharts"));
    let sellOptions = Object.assign({}, options, {
      formatter: "时间:{b0}<br />均价:{c0}",
      series: [
        {
          data: [],
          markPoint: {
            itemStyle: {
              color: "#fff",
              borderWidth: 2,
              borderColor: "rgba(245, 45, 54, 1)",
            },
            data: [{ type: "max", name: "最大值" }],
          },
          type: "line",
          lineStyle: {
            color: "rgba(245, 45, 54, 1)",
          },
          areaStyle: {
            color: "rgba(245, 45, 54, 0.1)",
          },
          showSymbol: false,
        },
      ],
    });
    sellEcharts.setOption(sellOptions);
    const {
      xAxisData,
      series_1,
      series_2,
      series_3,
    } = this.$store.state.priceTotal;
    this.currentPrice = series_1[series_1.length - 1];
    this.highPrice = Math.max.apply(null, series_1);
    this.lowerPrice = Math.min.apply(null, series_1);
    this.startTime = xAxisData[0];
    this.endTime = xAxisData[xAxisData.length - 1];

    this.historyLowerPrice = Math.min.apply(null, series_2);
    historyPriceEcharts.setOption({
      xAxis: { data: xAxisData },
      series: [
        {
          data: series_1,
        },
      ],
    });
    historyCouponEcharts.setOption({
      xAxis: { data: xAxisData },
      series: [
        {
          data: series_2,
        },
      ],
    });
    sellEcharts.setOption({
      xAxis: { data: xAxisData },
      series: [
        {
          data: series_3,
        },
      ],
    });
  },
};
</script>

<style lang="less" scoped>
.price-container {
  position: relative;
  min-height: 100px;
  .history-price-header {
    margin-bottom: 26px;
    .label {
      margin-left: 10px;
      margin-right: 5px;
      font-size: 12px;
      color: #666666;
    }
    .current-price {
      font-size: 12px;
      color: #ff6c00;
    }
    .highest-price {
      font-size: 12px;
      color: #f52d36;
    }
    .lowest-price {
      font-size: 12px;
      color: #37bf9d;
    }
    .date {
      font-size: 12px;
      color: #bbbbbb;
    }
  }
  .history-coupon-header {
    margin-bottom: 26px;
    .label {
      margin-right: 5px;
      font-size: 12px;
      color: #666666;
    }
    .price {
      font-size: 12px;
      color: #37bf9d;
    }
  }
  .screenshots {
    outline: none;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 98px;
    height: 28px;
    background: linear-gradient(-90deg, #9b74ff, #5f5fff);
    border-radius: 14px;
    text-align: center;
    span {
      display: inline-block;
      vertical-align: middle;
    }
    .icon {
      margin-right: 3px;
      color: #fff;
      font-size: 16px;
    }
    .text {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>